<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>话题列表</title>
    <link rel="stylesheet" href="${ctxPath}/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctxPath}/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctxPath}/css/common.css">
    <link rel="stylesheet" href="${ctxPath}/css/topic.css">
</head>
<body>
<jsp:include page="/WEB-INF/pages/commons/header.jsp"></jsp:include>


<%--面包屑导航条--%>
<nav class="list">
    <a href="${ctxPath}/index.jsp">首页</a>
    <i>/</i>
    <b>话题列表</b>
</nav>

<%--当前页面主要内容--%>
<main class="topics-container">
    <%--    <div class="row title">--%>
    <%--        <span class="col-1">序号</span>--%>
    <%--        <span class="col-4">标题</span>--%>
    <%--        <span class="col-4">发布时间</span>--%>
    <%--        <span class="col-3">发布者</span>--%>
    <%--    </div>--%>
    <%--    <c:forEach items="${pagination.dataList}" var="t" varStatus="x">--%>
    <%--        <div class="row topic">--%>
    <%--            <span class="col-1">${(pagination.current - 1 ) * pagination.size + x.count }</span>--%>
    <%--            <span class="col-4">--%>
    <%--                <a href="${ctxPath}/topic/detail?id=${t.id}">${t.title}</a>--%>
    <%--            </span>--%>
    <%--            <span class="col-4">${t.publishTime}</span>--%>
    <%--            <span class="col-3">${t.author.nickname}</span>--%>
    <%--        </div>--%>
    <%--    </c:forEach>--%>

    <div class="main-pages">

        <div class="pages-left">话题热榜</div>


        <div class="pages-center">
            <c:forEach items="${pagination.dataList}" var="t" varStatus="x">
                <div class="pages-part">
                    <div class="pages-top">
                        <div class="pages-image"></div>
                            <%--                <span>${(pagination.current - 1 ) * pagination.size + x.count }</span>--%>
                        <div class="pages-info">
                            <div style="font-weight: bold;font-size:17px;color:#355378;">${t.author.nickname}</div>
                            <div style="font-size:15px;color:#696f70;">${t.publishTime}</div>
                        </div>
                    </div>
                    <div class="pages-title">
                        <a href="${ctxPath}/topic/detail?id=${t.id}">
                            <span class="sp1">${t.title}</span>
                            <span class="sp2"> ${t.content} </span>
                        </a>

                    </div>

                    <div class="pages-center-footer">
                        <a href="#">
                            <i class="fa fa-thumbs-o-up" aria-hidden="true">赞</i>
                        </a>
                        <a href="#">
                            <i class="fa fa-thumbs-o-down" aria-hidden="true">踩</i>
                        </a>
                        <a href="#">
                            <i class="fa fa-commenting" aria-hidden="true">解答</i>
                        </a>
                    </div>
                </div>

            </c:forEach>
        </div>

        <div class="pages-right">
            <div class="pages-right-top">用户榜单</div>
            <div class="pages-right-bottom">点击置顶</div>
        </div>


    </div>

    <hr>
    <div class="pagination-container">
        <div class="col-6">

            每页显示
            <a href="${requestScope.path}?size=3">3行</a>
            <a href="${requestScope.path}?size=5">5行</a>
            <a href="${requestScope.path}?size=10">10行</a>
            <a href="${requestScope.path}?size=20">20行</a>
            <a href="${requestScope.path}?size=50">50行</a>
        </div>

        <ul class="col-12 pagination pagination-sm justify-content-center">
            <li class="page-item ${ pagination.current == 1 ? 'disabled' : '' }">
                <a class="page-link" href="${requestScope.path}?current=${pagination.current-1}">上一页</a>
            </li>
            <c:forEach var="n" begin="1" step="1" end="${pagination.total}">
                <li class="page-item ${ pagination.current == n ? 'active' : '' }">
                    <a class="page-link" href="${requestScope.path}?current=${n}">${n}</a>
                </li>
            </c:forEach>
            <li class="page-item ${ pagination.current == pagination.total ? 'disabled' : '' }">
                <a class="page-link" href="${requestScope.path}?current=${pagination.current+1}">下一页</a>
            </li>
        </ul>
    </div>
</main>

<jsp:include page="/WEB-INF/pages/commons/footer.jsp"></jsp:include>
</body>
</html>
